<template>
  <div>
    <van-nav-bar
      @click-left="clock"
      title="我的动态"
      left-text="返回"
      left-arrow
    >
      <template #right>
        <van-button @click="fasong" type="primary" size="mini"
          >发送biu~</van-button
        >
      </template>
    </van-nav-bar>
    <div clang="form-group">
      <label for="username">在下方输入文字让世界见证你的努力...</label>
      <textarea v-model="wenzi" class="form-control"></textarea>
    </div>
    <van-uploader class="uploader" v-model="fileList" :max-count="3" />
    <van-icon size="22px" class="icon1" name="location-o" />
    <div class="weizhi">所在位置</div>
    <div class="xian"><hr /></div>
    <van-icon size="22px" class="icon2" name="closed-eye" />
    <div @click="haoyou" class="tixing">提醒谁看</div>
    <div class="xian"><hr /></div>
    <van-icon size="22px" class="icon3" name="contact" />
    <div class="keyi">谁可以看 <span class="gongkai">公开</span></div>
    <van-icon size="18px" class="icon4" name="arrow" />
    <div class="xian"><hr /></div>
    <!-- <div class="zhiding">指定成功</div> -->
  </div>
</template>

<script>
import moment from "moment";
import { mapMutations, mapState } from "vuex";
import Vue from "vue";
import { Toast } from "vant";
Vue.use(Toast);
import { Icon } from "vant";
Vue.use(Icon);
import { Uploader } from "vant";
Vue.use(Uploader);
import { NavBar } from "vant";
Vue.use(NavBar);
import { Button } from "vant";
Vue.use(Button);
export default {
  props: ["lid"],
  data() {
    return {
      fileList: [],
      lists1: [],
      wenzi: "",
      tupian: "",
      tupianname: [],
      formData: [],
    };
  },
  computed: {
    ...mapState(["islogin", "idphone", "username", "uid", "userimg"]),
  },

  mounted() {
    this.fileList = [];
    this.formData = [];
  },
  methods: {
    // 跳转网页
    haoyou() {
      this.$router.replace({ path: "/tixing" });
    },
    // 点击发送
    fasong() {
      if (this.wenzi == "") {
        Toast({
          message: "未输入内容",
          position: "bottom",
        });
        return;
      }
      this.lists1.length = 0;
      const url = "v1/users/uploaddynamic";
      var time = Date.now();
      const time2 = parseInt(new Date().getTime() / 1000);
      const time1 = moment.unix(time2).format("YYYY年MM月DD日 HH:mm");
      let lid2 = this.wenzi;
      let lid3 = this.lists1;
      this.formData = new FormData();
      this.fileList.forEach((element) => {
        this.formData.append("attrName", element.file);
      });
      if (this.fileList.length == 0) {
        //将用户选择的文件追加到form对象当中
        const params1 = `cid=${this.uid}&userimg=${this.userimg}&username=${
          this.username
        }&content=${lid2}&conimg=${""}&timer=${time1}`;
        this.axios.post(url, params1).then((res) => {});
      } else {
        this.axios.post("v1/users/upload", this.formData).then((res) => {
          if (res.data.data.attrName.length == undefined) {
            this.tupianname.push(res.data.data.attrName.newFilename);
          } else {
            res.data.data.attrName.forEach((element) => {
              this.tupianname.push(element.newFilename);
            });
          }
          const params2 = `cid=${this.uid}&userimg=${this.userimg}&username=${this.username}&content=${lid2}&conimg=${this.tupianname}&timer=${time1}`;
          this.axios.post(url, params2).then((res) => {
            console.log(res);
          });
        });
      }
      this.$router.replace({ path: "/home" });
      this.wenzi = "";
      this.tupianname = [];
      this.fileList = [];
      this.formData = [];
    },
    clock() {
      this.$router.go(-1);
    },
  },
};
</script>

<style  scoped>
body {
  position: relative;
}
label {
  padding-left: 20px;
  color: #9f9f9f;
}
.form-control {
  position: absolute;
  top: 74px;
  left: 18px;
  width: 90%;
  height: 150px;
  list-style: none;
  resize: none;
  border: 0px;
}
.uploader {
  margin-top: 180px;
  margin-left: 20px;
}
.weizhi {
  margin-top: 15px;
  font-size: 18px;
  margin-left: 50px;
}
.tixing {
  margin-top: 15px;
  font-size: 18px;
  margin-left: 50px;
}
.keyi {
  margin-top: 15px;
  font-size: 18px;
  margin-left: 50px;
}
.icon1 {
  position: absolute;
  left: 17px;
  top: 357px;
}
.icon2 {
  position: absolute;
  left: 17px;
  top: 406px;
}
.icon3 {
  position: absolute;
  left: 17px;
  top: 453px;
}
.icon4 {
  position: absolute;
  right: 58px;
  top: 453px;
  color: #9f9f9f;
}
.gongkai {
  margin-left: 145px;
  font-size: 15px;
  color: #9f9f9f;
}
.xian {
  margin-left: 50px;
  width: 70%;
}
/* .zhiding{
    width: 150px;
    background: rgb(43, 35, 35);
    color: #9f9f9f;
    height: 35px;
    border-radius: 10px;
    text-align: center;
    line-height: 35px;
    margin-left: 120px;
    margin-top: 50px;
    
} */
</style>